<template>
    <div style="height:100%">


        <navs></navs>
        <el-container style="height: 100%;">

            <el-aside width="200px">
                <sidebars></sidebars>
            </el-aside>

            <el-container>

                <el-main style="height: 100%">
                    <transition name="slide-fade">
                        <router-view></router-view>
                    </transition>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
<style>
    .el-header {

        color: #333;
        line-height: 60px;
    }

    .el-aside {
        color: #000;
    }
</style>

<style>
    .slide-fade-enter-active {
        transition: all .3s ease;
    }

    .slide-fade-enter, .slide-fade-leave-to
        /* .slide-fade-leave-active for below version 2.1.8 */
    {
        transform: translateX(10px);
        opacity: 0;
    }
</style>

<script>
    import Navs from './admin/block/Nav';
    import Sidebars from './admin/block/Sidebar';

    export default {
        components: {
            Navs,
            Sidebars
        }
    }
</script>